<script lang="ts">
  import { getCodeImg, getQRCode, getTelCodeApi } from '@/api';
  import useUserStore from '@/store/modules/user';
  import $model from '@/plugins/modal';
  import { FormRules, ElDialog } from 'element-plus';
  import { reactive, toRefs } from 'vue';

  import {
    openLoginBox,
    openModelResetPwd,
    openModelRegister,
    messageInstance,
  } from '@/pages/common/showModel';
  import wxlogin from 'vue-wxlogin/src/components/vue-wxlogin.vue';

  export default defineComponent({
    name: 'ModelLogin',

    components: { ElDialog, wxlogin },
    setup(_, cxt) {
      const { proxy, uid } = getCurrentInstance();
      const router = useRouter();
      const route = useRoute();
      const loginRef = ref();
      const state = reactive<{
        loading: boolean;
        codeUrl: string;
        telMsg?: string;
        captchaEnabled?: boolean;
        open: boolean;
        rules: FormRules<any>;
        formData: any;
        activeTabName: 'pwd' | 'code';
        [key: string]: any;
      }>({
        loading: false,
        activeTabName: 'pwd', //pwd | code
        codeUrl: '',
        open: false,

        rules: {
          phonenumber: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
          ],
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            // {
            //   pattern:
            //     /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.*~!@#$%^&*()_+|<>,.?/:;'\\[\\\]{}\"*])[A-Za-z\d.\-.*~!@#$%^&*()_+|<>,.?/:;'\\[\\\]{}\"*]{8,16}$/,
            //   message: '请输入8-16位登录密码，必须包含大小写字母、数字及特殊字符。',
            //   trigger: 'blur',
            // },
            {
              pattern: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,16}$/,

              trigger: 'blur',
              message: '请输入8-16位登录密码，必须包含大小写字母及数字',
            },
            // { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
          ],
          code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
          code1: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        },
        formData: {
          username: '',
          password: '',
          userType: '2',
        },
      });
      //微信登录状态

      const redirect = encodeURIComponent(String(route.fullPath));
      console.log(redirect);
      const wecahtQR = ref({
        redirect_uri: encodeURIComponent(
          'https://www.binjianjifu.com/wxLoginPage?redirect=' + redirect,
        ),
        show: false,
      });
      // 验证码开关
      const captchaEnabled = ref(true);
      // 注册开关
      const userStore = useUserStore();
      const { loading, activeTabName, codeUrl, open, rules, formData } = toRefs(state);

      const onWecaht = async () => {
        wecahtQR.value.show = !wecahtQR.value.show;
        if (wecahtQR.value.show === true) {
          // const { msg } = await getQRCode();
          // wecahtQR.value.redirect_uri = encodeURIComponent(
          //   'https://www.binjianjifu.com/wxLoginPage',
          // );
          // const obj = new WxLogin({
          //   self_redirect: true,
          //   id: 'login_container',
          //   appid: 'wx2b3d1f0015b9efc1',
          //   scope: '',
          //   redirect_uri: msg,
          //   state: '',
          //   style: '',
          //   href: '',
          // });
        }
        console.log('onWecaht');
      };
      const openModel = () => {
        getCode();
        loading.value = false;
        open.value = true;
        return $model;
      };

      const closeModel = () => {
        loading.value = false;
        messageInstance.forEach((_, vm) => {
          console.log(_, vm);
          if (vm.uid === proxy.uid) {
            _.reject();
          }
        });
        messageInstance.clear();

        open.value = false;
      };

      async function handleLogin() {
        const valid = await loginRef.value.validate();
        console.log(valid);
        console.log(formData.value, activeTabName.value);
        if (valid) {
          loading.value = true;
          if (activeTabName.value === 'pwd') {
            // 调用action的登录方法
            userStore
              .login(formData.value)
              .then(() => {
                userStore.getInfo();
                setTimeout(() => {
                  // window.location.reload();
                  // router.replace('/');
                  console.log(messageInstance);
                  messageInstance.forEach((_, vm, o) => {
                    console.log(_, vm.uid, uid);
                    if (vm.uid === uid) {
                      _.resolve(true);
                    }
                  });
                  closeModel();
                }, 200);
              })
              .catch(() => {
                loading.value = false;
                // 重新获取验证码
                if (captchaEnabled.value) {
                  getCode();
                }
              });
          }
        }
      }

      const telMsg = ref('获取验证码');
      let interval: NodeJS.Timeout | null = null;

      // 获取短信验证码
      const getTelCode = () => {
        if (telMsg.value === '获取验证码') {
          if (formData.value.phonenumber) {
            // 获取短信验证码
            getTelCodeApi(formData.value.phonenumber)
              .then((res) => {
                if (res.code === 200) {
                  let count = 60;
                  telMsg.value = `${count}s`;
                  interval = setInterval(() => {
                    count--;
                    telMsg.value = `${count}s`;
                    if (count === 0) {
                      clearInterval(interval as NodeJS.Timeout);
                      telMsg.value = '获取验证码';
                    }
                  }, 1000);
                }
              })
              .catch(() => {
                telMsg.value = '获取验证码';
              });
          } else {
            $model.msgError('请输入手机号');
          }
        }
      };

      onUnmounted(() => {
        clearInterval(interval as NodeJS.Timeout);
      });
      function getCode() {
        getCodeImg().then(({ data: res }: any) => {
          console.log(res);
          captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
          if (captchaEnabled.value) {
            codeUrl.value = 'data:image/gif;base64,' + res.img;
            formData.value.uuid = res.uuid;
          }
        });
      }

      // const LoginRef = inject<any>('LoginRef');
      // const RegisterRef = inject<any>('RegisterRef');
      // const ResetPwdRef = inject<any>('ResetPwdRef');
      function openLogin() {
        // LoginRef.value.openModel();
        openLoginBox();
        // openModelResetPwd, openModelRegister
        open.value = false;
      }
      function openRegister() {
        // RegisterRef.value.openModel();
        openModelRegister();
        open.value = false;
      }
      function openResetPwd() {
        // ResetPwdRef.value.openModel();
        openModelResetPwd();
        open.value = false;
      }

      const methods = {
        uid,
        loginRef,
        telMsg,
        getTelCode,
        openLogin,
        openRegister,
        openResetPwd,
        onWecaht,
        wecahtQR,
        captchaEnabled,
        getCode,
        handleLogin,
        openModel,
        closeModel,
        loading,
        activeTabName,
        codeUrl,
        open,
        rules,
        formData,
      };
      cxt.expose(methods);
      return methods;
    },
  });
</script>

<template>
  <el-dialog
    class="login-popup"
    v-model="open"
    v-if="open"
    :show-close="false"
    center
    width="788px"
    append-to-body
  >
    <ScreenAdapter element-dom=".login-popup">
      <div class="login">
        <div class="login-wechat">
          <div class="login-wechat__cover">
            <img src="@/assets/images/dashboard/wechat-main.png" alt="" />
          </div>
          <div class="login-wechat__title">扫一扫，登录小程序</div>
        </div>
        <el-form
          ref="loginRef"
          hide-required-asterisk
          label-position="top"
          :model="formData"
          :rules="rules"
          class="login-form relative"
        >
          <div
            @click="onWecaht"
            class="wechat-r z-1 absolute right-0 top-[-20px] w-[60px] h-[60px] cursor-pointer"
          >
            <img
              v-show="!wecahtQR.show"
              w-full
              h-full
              src="@/assets/images/dashboard/wechat-r.png"
              alt=""
            />
            <img
              v-show="wecahtQR.show"
              w-full
              h-full
              src="@/assets/images/dashboard/wechat-r-a.png"
              alt=""
            />
          </div>

          <div v-if="wecahtQR.show" class="wechat-QR">
            <div class="wechat-QR-title">微信登录</div>
            <div class="wechat-QR-content login_container">
              <div class="wechat-QR-content__if">
                <!--              <img-->
                <!--                w-full-->
                <!--                h-full-->
                <!--                src="https://img2.baidu.com/it/u=823035191,2719390490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"-->
                <!--                alt=""-->
                <!--              />-->
                <wxlogin
                  :self_redirect="false"
                  appid="wx2b3d1f0015b9efc1"
                  scope="snsapi_login"
                  theme="black"
                  class="login-card-form__lgCode_iframe"
                  href="data:text/css;base64,Ci5pbXBvd2VyQm94IC5xcmNvZGUge3dpZHRoOiAxODBweDttYXJnaW46MCBhdXRvO2Rpc3BsYXk6IGJsb2NrO30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm97d2lkdGg6IDMwMHB4O30KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7Y29sb3I6ICMwMDA7fQouaW1wb3dlckJveCAuc3RhdHVzIHtwYWRkaW5nOiAwO21hcmdpbi10b3A6IDQwcHh9Ci5pbXBvd2VyQm94IC5zdGF0dXNfdHh0IHtjb2xvcjogIzAwMDt9Ci5pbXBvd2VyQm94IC5zdGF0dXNfdHh0IGg0e2ZvbnQtc2l6ZTogMThweDt9Ci5pbXBvd2VyQm94IC5zdGF0dXNfdHh0IHAge2ZvbnQtc2l6ZTogMTRweDtjb2xvcjogIzY2Njt9Ci53cnBfY29kZXsKbWFyZ2luOiAwIGF1dG8gMTBweDsKICAgIHdpZHRoOiAyMDBweDsKICAgIGhlaWdodDogMjAwcHg7CiAgICBwYWRkaW5nOiAxMHB4OwogICAgYmFja2dyb3VuZDogdXJsKGRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBYmdBQUFHNENBWUFBQUEzeXZLekFBQUFBWE5TUjBJQXJzNGM2UUFBRmM1SlJFRlVlRjd0MmMrSzN1VVp4dkhmT3ptQWRoMFlTQWcwdWd2b0NTaElDVWd3UjJEY3VEVzRjTXdxeVdwMFk1dHR1ekFld1dnUTB0Q2krNWFXN0V5S2tzRkJjT2tKMUxkTUpQNkp0Z2h6L1o3bldueXlISGp2NTM0LzkrTExURGJMbmIzdE11bmYvb1VYbDh1NzV5ZTk3bGtDQkFnUVdGUGc0T2poY3UzK0oycys4WDluYjJZRlR0eW0zZHpEQkFnUUdDWXdNM0pUQW5meDlMbGI3ejMzMGpmRGhEMUVnQUFCQXRNRXJ2N2pyNys5OS9VWGI0eGVZRUxnTnE4dGw5NjVQZnFMZW84QUFRSUVKZ29jdkgxbE9iVjlmK1FHdnh5NDdYSzR5aEtielUxeFcwWFdVQUlFQ1BRTEhFZHVaM3Q5bFVVM3k1bW41LzVTNEE2WFMrK2VYV1VCUXdrUUlFQ0F3Qm9DSCswOVdwNktuTUN0QVcwbUFRSUVDSXdWRUxpeDNsNGpRSUFBZ1VFQ0FqY0kyak1FQ0JBZ01GWkE0TVo2ZTQwQUFRSUVCZ2tJM0NCb3p4QWdRSURBV0FHQkcrdnROUUlFQ0JBWUpDQndnNkE5UTRBQUFRSmpCUVJ1ckxmWENCQWdRR0NRZ01BTmd2WU1BUUlFQ0l3VkVMaXgzbDRqUUlBQWdVRUNBamNJMmpNRUNCQWdNRlpBNE1aNmU0MEFBUUlFQmdrSTNDQm96eEFnUUlEQVdBR0JHK3Z0TlFJRUNCQVlKQ0J3ZzZBOVE0QUFBUUpqQlFSdXJMZlhDQkFnUUdDUWdNQU5ndllNQVFJRUNJd1ZFTGl4M2w0alFJQUFnVUVDQWpjSTJqTUVDQkFnTUZaQTRNWjZlNDBBQVFJRUJna0kzQ0JvenhBZ1FJREFXSUZmRjdqTmE4dWxkMjZQM2N4ckJBZ1FJRURnQkFJSGIxOVpUbTNmLy9HRXpYSm5iL3ZERDhUdEJMdytTb0FBQVFJekJaNkszUGVCdTNqNjNLMjd6NzkrZGVadTNpWkFnQUFCQWljUitQM2YvL1RIZTE5LzhjYnhqTWVCMjcvdzR2TEs3dTl1UHJzNWUrTWtnMzJXQUFFQ0JBak1GUGhzKytqR2gwZi92bjd0L2lmTFp2L0xlOXZMdStlWDdiSVZ1SmxYOFRZQkFnUUluRmpnT0hDYlpYUDk0T2poc25td1BYejhmM0FDZDJKWEF3Z1FJRUJnc3NDVHdEMytFNlhBVGI2RzV3a1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtSURBeFNnTklrQ0FBSUVtQVlGcnVvWmRDQkFnUUNBbUlIQXhTb01JRUNCQW9FbEE0SnF1WVJjQ0JBZ1FpQWtJWEl6U0lBSUVDQkJvRWhDNHBtdlloUUFCQWdSaUFnSVhvelNJQUFFQ0JKb0VCSzdwR25ZaFFJQUFnWmlBd01Vb0RTSkFnQUNCSmdHQmE3cUdYUWdRSUVBZ0ppQndNVXFEQ0JBZ1FLQkpRT0Nhcm1FWEFnUUlFSWdKQ0Z5TTBpQUNCQWdRYUJJUXVLWnIySVVBQVFJRVlnSUNGNk0waUFBQkFnU2FCQVN1NlJwMklVQ0FBSUdZZ01ERktBMGlRSUFBZ1NZQmdXdTZobDBJRUNCQUlDWWdjREZLZ3dnUUlFQ2dTVURnbXE1aEZ3SUVDQkNJQ1FoY2pOSWdBZ1FJRUdnU0VMaW1hOWlGQUFFQ0JHSUNBaGVqTklnQUFRSUVtZ1FFcnVrYWRpRkFnQUNCbUlEQXhTZ05Ja0NBQUlFbUFZRnJ1b1pkQ0JBZ1FDQW1JSEF4U29NSUVDQkFvRWxBNEpxdVlSY0NCQWdRaUFrSVhJelNJQUlFQ0JCb0VoQzRwbXZZaFFBQkFnUmlBZ0lYb3pTSUFBRUNCSm9FQks3cEduWWhRSUFBZ1ppQXdNVW9EU0pBZ0FDQkpnR0JhN3FHWFFnUUlFQWdKaUJ3TVVxRENCQWdRS0JKUU9DYXJtRVhBZ1FJRUlnSkNGeU0waUFDQkFnUWFCSVF1S1pyMklVQUFRSUVZZ0lDRjZNMGlBQUJBZ1NhQkFTdTZScDJJVUNBQUlHWWdNREZLQTBpUUlBQWdTWUJnV3U2aGwwSUVDQkFJQ1lnY0RGS2d3Z1FJRUNnU1VEZ21xNWhGd0lFQ0JDSUNRaGNqTklnQWdRSUVHZ1NFTGltYTlpRkFBRUNCR0lDQWhlak5JZ0FBUUlFbWdRRXJ1a2FkaUZBZ0FDQm1JREF4U2dOSWtDQUFJRW1BWUZydW9aZENCQWdRQ0FtSUhBeFNvTUlFQ0JBb0VsQTRKcXVZUmNDQkFnUWlBa0lYSXpTSUFJRUNCQm9FaEM0cG12WWhRQUJBZ1JpQWdJWG96U0lBQUVDQkpvRUJLN3BHblloUUlBQWdaaUF3TVVvRFNKQWdBQ0JKZ0dCYTdxR1hRZ1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtSURBeFNnTklrQ0FBSUVtQVlGcnVvWmRDQkFnUUNBbUlIQXhTb01JRUNCQW9FbEE0SnF1WVJjQ0JBZ1FpQWtJWEl6U0lBSUVDQkJvRWhDNHBtdlloUUFCQWdSaUFnSVhvelNJQUFFQ0JKb0VCSzdwR25ZaFFJQUFnWmlBd01Vb0RTSkFnQUNCSmdHQmE3cUdYUWdRSUVBZ0ppQndNVXFEQ0JBZ1FLQkpRT0Nhcm1FWEFnUUlFSWdKQ0Z5TTBpQUNCQWdRYUJJUXVLWnIySVVBQVFJRVlnSUNGNk0waUFBQkFnU2FCQVN1NlJwMklVQ0FBSUdZZ01ERktBMGlRSUFBZ1NZQmdXdTZobDBJRUNCQUlDWWdjREZLZ3dnUUlFQ2dTVURnbXE1aEZ3SUVDQkNJQ1FoY2pOSWdBZ1FJRUdnU0VMaW1hOWlGQUFFQ0JHSUNBaGVqTklnQUFRSUVtZ1FFcnVrYWRpRkFnQUNCbUlEQXhTZ05Ja0NBQUlFbUFZRnJ1b1pkQ0JBZ1FDQW1JSEF4U29NSUVDQkFvRWxBNEpxdVlSY0NCQWdRaUFrSVhJelNJQUlFQ0JCb0VoQzRwbXZZaFFBQkFnUmlBZ0lYb3pTSUFBRUNCSm9FQks3cEduWWhRSUFBZ1ppQXdNVW9EU0pBZ0FDQkpnR0JhN3FHWFFnUUlFQWdKaUJ3TVVxRENCQWdRS0JKUU9DYXJtRVhBZ1FJRUlnSkNGeU0waUFDQkFnUWFCSVF1S1pyMklVQUFRSUVZZ0lDRjZNMGlBQUJBZ1NhQkFTdTZScDJJVUNBQUlHWWdNREZLQTBpUUlBQWdTWUJnV3U2aGwwSUVDQkFJQ1lnY0RGS2d3Z1FJRUNnU1VEZ21xNWhGd0lFQ0JDSUNRaGNqTklnQWdRSUVHZ1NFTGltYTlpRkFBRUNCR0lDQWhlak5JZ0FBUUlFbWdRRXJ1a2FkaUZBZ0FDQm1JREF4U2dOSWtDQUFJRW1BWUZydW9aZENCQWdRQ0FtSUhBeFNvTUlFQ0JBb0VsQTRKcXVZUmNDQkFnUWlBa0lYSXpTSUFJRUNCQm9FaEM0cG12WWhRQUJBZ1JpQWdJWG96U0lBQUVDQkpvRUJLN3BHblloUUlBQWdaaUF3TVVvRFNKQWdBQ0JKZ0dCYTdxR1hRZ1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtSURBeFNnTklrQ0FBSUVtQVlGcnVvWmRDQkFnUUNBbUlIQXhTb01JRUNCQW9FbEE0SnF1WVJjQ0JBZ1FpQWtJWEl6U0lBSUVDQkJvRWhDNHBtdlloUUFCQWdSaUFnSVhvelNJQUFFQ0JKb0VCSzdwR25ZaFFJQUFnWmlBd01Vb0RTSkFnQUNCSmdHQmE3cUdYUWdRSUVBZ0ppQndNVXFEQ0JBZ1FLQkpRT0Nhcm1FWEFnUUlFSWdKQ0Z5TTBpQUNCQWdRYUJJUXVLWnIySVVBQVFJRVlnSUNGNk0waUFBQkFnU2FCQVN1NlJwMklVQ0FBSUdZZ01ERktBMGlRSUFBZ1NZQmdXdTZobDBJRUNCQUlDWWdjREZLZ3dnUUlFQ2dTVURnbXE1aEZ3SUVDQkNJQ1FoY2pOSWdBZ1FJRUdnU0VMaW1hOWlGQUFFQ0JHSUNBaGVqTklnQUFRSUVtZ1FFcnVrYWRpRkFnQUNCbUlEQXhTZ05Ja0NBQUlFbUFZRnJ1b1pkQ0JBZ1FDQW1JSEF4U29NSUVDQkFvRWxBNEpxdVlSY0NCQWdRaUFrSVhJelNJQUlFQ0JCb0VoQzRwbXZZaFFBQkFnUmlBZ0lYb3pTSUFBRUNCSm9FQks3cEduWWhRSUFBZ1ppQXdNVW9EU0pBZ0FDQkpnR0JhN3FHWFFnUUlFQWdKaUJ3TVVxRENCQWdRS0JKUU9DYXJtRVhBZ1FJRUlnSkNGeU0waUFDQkFnUWFCSVF1S1pyMklVQUFRSUVZZ0lDRjZNMGlBQUJBZ1NhQkFTdTZScDJJVUNBQUlHWWdNREZLQTBpUUlBQWdTWUJnV3U2aGwwSUVDQkFJQ1lnY0RGS2d3Z1FJRUNnU1VEZ21xNWhGd0lFQ0JDSUNRaGNqTklnQWdRSUVHZ1NFTGltYTlpRkFBRUNCR0lDQWhlak5JZ0FBUUlFbWdRRXJ1a2FkaUZBZ0FDQm1JREF4U2dOSWtDQUFJRW1BWUZydW9aZENCQWdRQ0FtSUhBeFNvTUlFQ0JBb0VsQTRKcXVZUmNDQkFnUWlBa0lYSXpTSUFJRUNCQm9FaEM0cG12WWhRQUJBZ1JpQWdJWG96U0lBQUVDQkpvRUJLN3BHblloUUlBQWdaaUF3TVVvRFNKQWdBQ0JKZ0dCYTdxR1hRZ1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtSURBeFNnTklrQ0FBSUVtQVlGcnVvWmRDQkFnUUNBbUlIQXhTb01JRUNCQW9FbEE0SnF1WVJjQ0JBZ1FpQWtJWEl6U0lBSUVDQkJvRWhDNHBtdlloUUFCQWdSaUFnSVhvelNJQUFFQ0JKb0VCSzdwR25ZaFFJQUFnWmlBd01Vb0RTSkFnQUNCSmdHQmE3cUdYUWdRSUVBZ0ppQndNVXFEQ0JBZ1FLQkpRT0Nhcm1FWEFnUUlFSWdKQ0Z5TTBpQUNCQWdRYUJJUXVLWnIySVVBQVFJRVlnSUNGNk0waUFBQkFnU2FCQVN1NlJwMklVQ0FBSUdZZ01ERktBMGlRSUFBZ1NZQmdXdTZobDBJRUNCQUlDWWdjREZLZ3dnUUlFQ2dTVURnbXE1aEZ3SUVDQkNJQ1FoY2pOSWdBZ1FJRUdnU0VMaW1hOWlGQUFFQ0JHSUNBaGVqTklnQUFRSUVtZ1FFcnVrYWRpRkFnQUNCbUlEQXhTZ05Ja0NBQUlFbUFZRnJ1b1pkQ0JBZ1FDQW1JSEF4U29NSUVDQkFvRWxBNEpxdVlSY0NCQWdRaUFrSVhJelNJQUlFQ0JCb0VoQzRwbXZZaFFBQkFnUmlBZ0lYb3pTSUFBRUNCSm9FQks3cEduWWhRSUFBZ1ppQXdNVW9EU0pBZ0FDQkpnR0JhN3FHWFFnUUlFQWdKaUJ3TVVxRENCQWdRS0JKUU9DYXJtRVhBZ1FJRUlnSkNGeU0waUFDQkFnUWFCSVF1S1pyMklVQUFRSUVZZ0lDRjZNMGlBQUJBZ1NhQkFTdTZScDJJVUNBQUlHWWdNREZLQTBpUUlBQWdTWUJnV3U2aGwwSUVDQkFJQ1lnY0RGS2d3Z1FJRUNnU1VEZ21xNWhGd0lFQ0JDSUNRaGNqTklnQWdRSUVHZ1NFTGltYTlpRkFBRUNCR0lDQWhlak5JZ0FBUUlFbWdRRXJ1a2FkaUZBZ0FDQm1JREF4U2dOSWtDQUFJRW1BWUZydW9aZENCQWdRQ0FtSUhBeFNvTUlFQ0JBb0VsQTRKcXVZUmNDQkFnUWlBa0lYSXpTSUFJRUNCQm9FaEM0cG12WWhRQUJBZ1JpQWdJWG96U0lBQUVDQkpvRUJLN3BHblloUUlBQWdaaUF3TVVvRFNKQWdBQ0JKZ0dCYTdxR1hRZ1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtSURBeFNnTklrQ0FBSUVtQVlGcnVvWmRDQkFnUUNBbUlIQXhTb01JRUNCQW9FbEE0SnF1WVJjQ0JBZ1FpQWtJWEl6U0lBSUVDQkJvRWhDNHBtdlloUUFCQWdSaUFnSVhvelNJQUFFQ0JKb0VCSzdwR25ZaFFJQUFnWmlBd01Vb0RTSkFnQUNCSmdHQmE3cUdYUWdRSUVBZ0ppQndNVXFEQ0JBZ1FLQkpRT0Nhcm1FWEFnUUlFSWdKQ0Z5TTBpQUNCQWdRYUJJUXVLWnIySVVBQVFJRVlnSUNGNk0waUFBQkFnU2FCQVN1NlJwMklVQ0FBSUdZZ01ERktBMGlRSUFBZ1NZQmdXdTZobDBJRUNCQUlDWWdjREZLZ3dnUUlFQ2dTVURnbXE1aEZ3SUVDQkNJQ1FoY2pOSWdBZ1FJRUdnU0VMaW1hOWlGQUFFQ0JHSUNBaGVqTklnQUFRSUVtZ1FFcnVrYWRpRkFnQUNCbUlEQXhTZ05Ja0NBQUlFbUFZRnJ1b1pkQ0JBZ1FDQW1JSEF4U29NSUVDQkFvRWxBNEpxdVlSY0NCQWdRaUFrSVhJelNJQUlFQ0JCb0VoQzRwbXZZaFFBQkFnUmlBZ0lYb3pTSUFBRUNCSm9FQks3cEduWWhRSUFBZ1ppQXdNVW9EU0pBZ0FDQkpnR0JhN3FHWFFnUUlFQWdKaUJ3TVVxRENCQWdRS0JKUU9DYXJtRVhBZ1FJRUlnSkNGeU0waUFDQkFnUWFCSVF1S1pyMklVQUFRSUVZZ0lDRjZNMGlBQUJBZ1NhQkFTdTZScDJJVUNBQUlHWWdNREZLQTBpUUlBQWdTWUJnV3U2aGwwSUVDQkFJQ1lnY0RGS2d3Z1FJRUNnU1VEZ21xNWhGd0lFQ0JDSUNRaGNqTklnQWdRSUVHZ1NFTGltYTlpRkFBRUNCR0lDQWhlak5JZ0FBUUlFbWdRRXJ1a2FkaUZBZ0FDQm1JREF4U2dOSWtDQUFJRW1BWUZydW9aZENCQWdRQ0FtSUhBeFNvTUlFQ0JBb0VsQTRKcXVZUmNDQkFnUWlBa0lYSXpTSUFJRUNCQm9FaEM0cG12WWhRQUJBZ1JpQWdJWG96U0lBQUVDQkpvRUJLN3BHblloUUlBQWdaaUF3TVVvRFNKQWdBQ0JKZ0dCYTdxR1hRZ1FJRUFnSmlCd01VcURDQkFnUUtCSlFPQ2FybUVYQWdRSUVJZ0pDRnlNMGlBQ0JBZ1FhQklRdUtacjJJVUFBUUlFWWdJQ0Y2TTBpQUFCQWdTYUJBU3U2UnAySVVDQUFJR1lnTURGS0EwaVFJQUFnU1lCZ1d1NmhsMElFQ0JBSUNZZ2NERktnd2dRSUVDZ1NVRGdtcTVoRndJRUNCQ0lDUWhjak5JZ0FnUUlFR2dTRUxpbWE5aUZBQUVDQkdJQ0FoZWpOSWdBQVFJRW1nUUVydWthZGlGQWdBQ0JtTUJQQXJmLzVWKzJsM2VmV2JiTDl1YXptN00zWXE4WVJJQUFBUUlFQmdzOENkekIwWU5sczl6WjIrNWZlR0Y1WmZlOHdBMCtoT2NJRUNCQUlDdHdITGdQang1ZXYzYi8wKzhDZHp6KzR1bHp0KzQrLy9yVjdGT21FU0JBZ0FDQmNRSVgvL25uUDl6OTZ2UEhMZnMrY0krZjM5bTVzcnk4LzhHNFZieEVnQUFCQWdSQ0FoKy85ZXJ5N2ViMmsyay9EWnpJaFpTTklVQ0FBSUdoQWsvRjdlZS93WDIzemVGeTZkMnpReGZ6R0FFQ0JBZ1FPSW5BUjN1UGxzMXk1c2NqZnY0Ym5NQ2RoTmhuQ1JBZ1FHQ0dnTUROVVBjbUFRSUVDS3d1SUhDckUzdUFBQUVDQkdZSUNOd01kVzhTSUVDQXdPb0NBcmM2c1FjSUVDQkFZSWFBd00xUTl5WUJBZ1FJckM0Z2NLc1RlNEFBQVFJRVpnZ0kzQXgxYnhJZ1FJREE2Z0lDdHpxeEJ3Z1FJRUJnaG9EQXpWRDNKZ0VDQkFpc0xpQndxeE43Z0FBQkFnUm1DQWpjREhWdkVpQkFnTURxQWdLM09yRUhDQkFnUUdDR2dNRE5VUGNtQVFJRUNLd3VJSENyRTN1QUFBRUNCR1lJQ053TWRXOFNJRUNBd09vQ0FyYzZzUWNJRUNCQVlJYUF3TTFROXlZQkFnUUlyQzRnY0tzVGU0QUFBUUlFWmdnSTNBeDFieElnUUlEQTZnSUN0enF4QndnUUlFQmdoc0N2RE55eWJKZkRWZlk3dFhOamVYbi9nMVZtRzBxQUFBRUMzUUlmdi9YcThwL05qVldXM0N4bm5wNjdXZTdzYlZkNTdIOE4zZG01SW5KRHhUMUdnQUNCK1FMSGNmdDJjM3ZrSXVNRHR5ekx4ZFBuYnIzMzNFdmZqUHlpM2lKQWdBQ0JPUUp2L3V0dnY3bjcxZWRYUjc4K0pYREhYM0wvd2d2TDVkMW5SbjlmN3hFZ1FJREFRSUdEb3dmTHRmdWZEbnp4aDZlbUJVN2twdHpib3dRSUVCZ21NRE51eDEveXYwbjZoL21GckJQWUFBQUFBRWxGVGtTdVFtQ0MpOwogICAgYmFja2dyb3VuZC1zaXplOiAxMDAlIDEwMCU7CiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgouanNfd3hfZGVmYXVsdF90aXAgewogIG1hcmdpbi10b3A6IDQwcHg7Cn0KI3d4X2RlZmF1bHRfdGlwIHAgewogIGZvbnQtc2l6ZTogMThweDsKfQojd3hfZGVmYXVsdF90aXAgcCtwIHsKICBmb250LXNpemU6IDE4cHg7CmNvbG9yOiAjNjY2Owp9CgouaW1wb3dlckJveCAucXJjb2RlIHsKIGJvcmRlcjogbm9uZTsKfQoKLndlYl9xcmNvZGVfcGFuZWxfcXVpY2tfbG9naW57CiAgICBiYWNrZ3JvdW5kOiByZ2IoMjU1LCAyNTUsIDI1NSk7CiAgICBtaW4taGVpZ2h0OiAyMDBweDsKICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi53ZWJfcXJjb2RlX3N3aXRjaF93cnAge21hcmdpbi10b3A6IDEwcHg7fQouaW1wb3dlckJveCAuc3RhdHVzX2ljb24gewogd2lkdGg6IDMzcHg7aGVpZ2h0OiAzM3B4OyBtYXJnaW4tbGVmdDogNDRweDsKfQ=="
                  :redirect_uri="wecahtQR.redirect_uri"
                />
              </div>
              <!--              <div class="wechat-QR-content__tips">-->
              <!--                <div class="title">使用微信扫一扫登录</div>-->
              <!--              </div>-->
            </div>
          </div>
          <div v-else class="box">
            <el-tabs stretch v-model="activeTabName">
              <el-tab-pane label="密码登录" name="pwd">
                <template v-if="activeTabName === 'pwd'">
                  <el-form-item prop="username" label="登录账号">
                    <el-input
                      v-model="formData.username"
                      type="text"
                      auto-complete="off"
                      placeholder="请输入身份证号或手机号"
                    >
                      <template #prefix>
                        <svg-icon icon-class="addBefore" class="el-input__icon input-icon" />
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password" label="登录密码">
                    <el-input
                      v-model="formData.password"
                      type="password"
                      auto-complete="off"
                      show-password
                      placeholder="请输入密码"
                    >
                      <template #prefix>
                        <svg-icon icon-class="addBefore-1" class="el-input__icon input-icon" />
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item prop="code" v-if="captchaEnabled" label="图形验证码">
                    <el-input
                      v-model="formData.code"
                      auto-complete="off"
                      placeholder="请输入右侧图形验证码的算术结果"
                      style="width: calc(65% - 20px)"
                      @keyup.enter="handleLogin"
                    >
                      <template #prefix>
                        <svg-icon icon-class="addBefore-2" class="el-input__icon input-icon" />
                      </template>
                    </el-input>
                    <div class="login-code !w-[35%]">
                      <img :src="codeUrl" @click="getCode" class="login-code-img !w-full !h-full" />
                    </div>
                  </el-form-item>
                </template>
              </el-tab-pane>

              <el-tab-pane v-if="false" label="验证码登录" name="code">
                <template v-if="activeTabName === 'code'">
                  <el-form-item prop="phonenumber" label="登录账号">
                    <el-input
                      v-model="formData.phonenumber"
                      type="text"
                      auto-complete="off"
                      placeholder="请输入手机号"
                    >
                      <template #prefix>
                        <el-icon><Iphone /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item class="text-[13px] text" prop="code" label="图形验证码">
                    <el-input
                      v-model="formData.code1"
                      auto-complete="off"
                      placeholder="请输入右侧图形验证码的算术结果"
                      style="width: calc(65% - 20px)"
                      @keyup.enter="handleLogin"
                    >
                      <template #prefix>
                        <el-icon><Message /></el-icon>
                      </template>
                    </el-input>
                    <div class="login-code !w-[35%]">
                      <img :src="codeUrl" @click="getCode" class="login-code-img !w-full !h-full" />
                    </div>
                  </el-form-item>

                  <el-form-item prop="code" label="短信验证码">
                    <el-input
                      v-model="formData.code"
                      auto-complete="off"
                      placeholder="请输入短信验证码"
                      style="width: calc(65% - 20px)"
                    >
                      <template #prefix>
                        <el-icon><Message /></el-icon>
                      </template>
                    </el-input>
                    <el-button
                      @click="getTelCode"
                      plain
                      type="primary"
                      color="#165dff"
                      style="width: 35%"
                      class="login-code"
                    >
                      {{ telMsg || '获取验证码' }}
                    </el-button>
                  </el-form-item>
                </template>
              </el-tab-pane>
            </el-tabs>

            <div style="width: 100%; margin-top: 56px" class="!h-auto">
              <el-button @click="handleLogin" class="submitClass" color="#165DFF" type="primary">
                <span v-if="!loading">登录</span>
                <span v-else>登 录 中...</span>
              </el-button>
              <div class="flex justify-between flex-content-center flex-items-center" mt28px>
                <div v-if="activeTabName === 'pwd'" class="">
                  <span @click="openResetPwd" class="link-type !text-[#888888ff] font-normal"
                    >忘记密码</span
                  >
                </div>
                <div class="flex-1 text-right">
                  <span
                    @click="openRegister"
                    class="link-type text-[#165DFF] text-[14px] font-normal"
                    >注册</span
                  >
                </div>
              </div>
            </div>
          </div>
        </el-form>

        <div @click="closeModel" class="close-bottom">
          <img src="@/assets/images/dashboard/close-btn-footer.png" alt="" />
        </div>
      </div>
    </ScreenAdapter>
  </el-dialog>
</template>

<style lang="scss">
  .login-popup {
    position: relative;
    padding: 0;
    border-radius: 8px;

    .el-dialog__body {
      padding: 45px 20px 50px;
    }

    .el-dialog__headerbtn .el-dialog__close {
      font-size: 20px;
    }

    .el-form-item--default .el-form-item__content {
      align-items: normal;
      justify-content: space-between;
      height: 54px;
    }

    .el-form-item--default,
    .el-form-item {
      width: 100%;
    }

    .el-input__wrapper {
      width: 100%;
      height: 54px;
      padding: 0 11px 0 0;
      background: rgb(242 243 245 / 100%);
      box-shadow: none;
    }

    .el-input__inner {
      //padding: 12px 0;
      font-family: 'AlibabaPuHuiTi-2-55-Regular', serif;
      //text-indent: 2.5em;
      font-size: 15px;
      line-height: 32px;
    }

    .text-13px {
      .el-input__inner {
        font-size: 13px;
      }
    }

    [placeholder='请输入右侧图形验证码的算术结果'] {
      font-size: 13px;
    }

    .el-input .el-input__prefix-inner {
      width: 22px;
      height: 22px;
      margin-top: 18px;
      margin-left: 10px;
    }

    .wechat-QR {
      &-title {
        height: 30px;
        color: #165dff;
        font-family: 'Alibaba PuHuiTi';
        font-size: 26px;
        font-style: normal;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        text-transform: none;
      }

      &-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 97px;
        margin-bottom: 113px;

        &__if {
          width: 300px;
          height: 280px;
          //background: url(@/assets/images/dashboard/wechat-border.png) no-repeat;
          background-size: 100% 100%;
          //padding: 20px;
          //border: 1px solid #dadada;
          img {
            width: 100%;
            height: 100%;
          }
        }

        &__tips {
          margin-top: 40px;

          .title {
            color: #333;
            font-family: 'Alibaba PuHuiTi';
            font-size: 20px;
            font-style: normal;
            font-weight: normal;
            line-height: 30px;
            text-align: center;
            text-transform: none;
          }

          .value {
            color: #666;
            font-family: 'Alibaba PuHuiTi';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            line-height: 30px;
            text-align: center;
            text-transform: none;
          }
        }
      }
    }

    .el-tabs {
      position: relative;

      .el-tabs__nav-wrap::after {
        display: none;
      }

      .el-tabs__active-bar {
        display: none;
      }

      .el-tabs__item {
        color: #666;
        font-family: 'Alibaba PuHuiTi';
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        text-transform: none;
      }

      .is-active {
        color: #165dff;
        font-family: 'Alibaba PuHuiTi';
        font-size: 26px !important;
        font-style: normal;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        text-transform: none;
      }
    }

    .el-tab-pane {
      margin-top: 36px;
    }

    .close-bottom {
      position: absolute;
      z-index: 10;
      bottom: -80px;
      left: 50%;
      height: 80px;
      transform: translateX(-50%);

      img {
        width: 34px;
        height: 80px;
        cursor: pointer;
      }
    }

    .login {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
    }

    .login-wechat {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-content: center;
      align-items: center;
      padding-top: 30px;

      &__title {
        margin-top: 20px;
        color: #333;
        font-family: 'Alimama ShuHeiTi', serif;
        font-size: 20px;
        line-height: 48px;
        text-align: center;
      }

      &__cover {
        width: 200px;
        height: 200px;
        padding: 4px;
        //border: 1px solid #dadada;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .login-form {
      position: relative;
      flex: 0 0 456px;
      width: 456px;
      padding: 0 10px 0 32px;
      background: #fff;

      &::after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 80%;
        transform: translateY(-50%);
        background: #f2f3f5;
      }
      //.el-input {
      //  height: 40px;
      //  input {
      //    height: 40px;
      //  }
      //}

      .login-tip {
        color: #bfbfbf;
        font-size: 13px;
        text-align: center;
      }

      .login-code {
        height: 54px;
      }

      .footFlex {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        margin-bottom: 36px;
      }

      .submitClass {
        width: 100%;
        height: 60px;
        margin-top: 10px;
        font-size: 20px;
      }

      .el-tabs__item {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
</style>
